<template>
  <Header :topMsg='topMsg' :flag='false'/>
  <!-- <div class="backup"></div> -->
  
  <div class="box">
    <div v-if="showMsg.length" class="showMsg">
      <div class="time">11:20</div>
      <div
        v-for="(item, index) in showMsg"
        :key="index" 
        :class="item.id > 0 ? 'user' : 'friend'"
      >
        <img v-show="!item.id > 0" :src="route.params.img" alt="">
        <span>{{item.msg}}</span>
        <img v-show="item.id > 0" src='../../public/img/Leonardo.jpg'
         alt="">
      </div>
    </div>
    <div class="food">
      <div class="sendMsg">
        <input type="text" @keyup.enter="send" v-model="msg">
        <button @click="send">发送</button>
      </div>
      <div class="funList">
        <span 
          class="iconfont"
          v-for="(item,index) in listArr"
          :key="index"
          :class="item"
        >
        </span>
      </div>
    </div>
  </div>
  
</template>

<script setup>
  import axios from 'axios'
  import {reactive, ref} from 'vue'
  import { useRoute } from 'vue-router'
  // import axios from 'axios'
  import Header from '../components/Header.vue'


  const route = useRoute()
  console.log(route.params)
  const {name} = route.params
  const msg = ref('')

  const topMsg = reactive({
    name,
    rightIco: 'iconfont icon-dianhuatianchong jia'
  })

  const listArr = reactive([
    'icon-yuyin',
    'icon-xiangce aa',
    'icon-xiangji',
    'icon-hongbao aa',
    'icon-biaoqing2',
    'icon-jia'
  ])
  const showMsg = reactive([])
  const send = () => {
    let id = 1
    let msgObj = {
      id,
      msg: msg.value,
    }
    id+=1
    showMsg.push(msgObj)
    answer(msg.value)
    msg.value = ''
  }

  const answer = (question) => {
    axios({
      method: 'post',
      url: 'http://api.tianapi.com/robot/index',
      params:{
        key: '59632ca2d0329fb64069ebfbf0b8534e',
        question,
        mode: 1,
        priv: 0
      }
    })
    .then(
      res => {
        const msg =  res.data.newslist[0].reply
        let id = 0
        let msgObj = {id, msg}
        id -= 1
        showMsg.push(msgObj)
      }
    )
    .catch(
      err => console.log(err)
    )
  }
  // axios.post('http://api.tianapi.com/robot/index?key=59632ca2d0329fb64069ebfbf0b8534e&question=你吃饭了吗&mode=1&priv=0')
  // .then(
  //   resolve => {
  //     console.log(resolve.data.newslist[0].reply)
  //   },
  //   reject => {
  //     console.log(reject.msg)
  //   }
  // )


</script>

<style scoped>
.box{
  width: 375px;
  height: 622px;
  padding-top: 45px;
  /* padding-bottom: 140px; */
  background-color: rgb(228, 227, 227);
}

/* * {
  background-color: rgb(228, 227, 227);
} */

/* .backup {
  width: 375px;
  height: 45px;
} */

.showMsg {
  width: 355px;
  /* height: 100px; */
  margin: 0 10px;
  padding-top: 10px;
  /* background-color: aqua; */
}

.showMsg .time {
  width: 70px;
  height: 20px;
  margin: 0 auto;
  /* background-color: beige; */
  text-align: center;
  line-height: 20px;
  font-size: 10px;
}

.showMsg .user {
  display: flex;
  justify-content: right;
  margin-top: 15px;
}

.showMsg .user span {
  max-width: 250px;
  min-width: 20px;
  margin-right: 5px;
  padding: 8px;
  border-radius: 13px;
  font-size: 13px;
  overflow-wrap: break-word;
  color: #fff;
  background-color: #12b7f5;
}

.showMsg .user img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.friend {
  display: flex;
  justify-content: left;
  margin-top: 15px;
}

.friend img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.friend  span {
  max-width: 250px;
  min-width: 20px;
  margin-right: 5px;
  padding: 8px;
  border-radius: 13px;
  font-size: 13px;
  overflow-wrap: break-word;
  color: #fff;
  background-color: #12b7f5;
}



.food {
  position: fixed;
  bottom: 0px;
  z-index: 2;
}
.sendMsg {
  display: flex;
  justify-content: space-between;
  width: 355px;
  margin: 0 10px;
}

.sendMsg input {
  width: 280px;
  height: 30px;
  border-radius: 30px;
  background-color: #fff;
  border: 0;
  padding-left: 15px;
}

.sendMsg button {
  width: 55px;
  background-color: #12b7f5;
  border: 0;
  color: #fff;
  border-radius: 15px;
}

.funList {
  display: flex;
  justify-content: space-between;
  width: 355px;
  margin: 0 10px;
} 

.funList span {
  width: 40px;
  height: 40px;
  /* background-color: #12b7f5; */
  font-size: 28px;
  color: rgb(139, 139, 139);
  text-align: center;
  line-height: 40px;
}

.funList .aa {
  font-size: 21px;
}
</style>